<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>驾驶证详情</title>
    <link rel="stylesheet" href="css/rate.css">
    <style type="text/css">
        .wrapper {
            padding-bottom: 20px;
        }
    </style>

</head>
<body class="f6">
<div class="wrap por height_98">
    <div class="main_body wrapper">
        <div class="rate_head">
            <img src="img/rate_toplayer.png"></div>
        <div class="type">
            <h3>驾驶证信息</h3>
            <img class="avatar" style="display: none" src="http://111.231.253.134/static/common/img/mp/avatar.jpg"
                 id="filePicker">
            <h3></h3>
            <p class="vehicle_type_out por">
                <img src="img/shaft.png" class="car_img type_car">
                <a class="type_truck">准驾</a>
                <span class='vehicle_type'>
                        <select name="classmodel" id="classmodel" class="b0 vehicle_truck_type type_truck">
                            <option data-vehicleType="C">C</option>
                            <option data-vehicleType="A">A</option>
                            <option data-vehicleType="B">B</option>
                        </select>
                    </span>
                <i class="type_arr"></i>
            </p>
            <p class="weight_out por" style="">
                <img src="img/name0.png">
                姓&nbsp;&nbsp;&nbsp;&nbsp;名
                <input type="text" class="weight" placeholder="必填" name="name" maxlength="50">
            </p>
            <p class="weight_out por" style="">
                <img src="img/name0.png">
                档案号
                <input type="text" placeholder="必填" class="weight" maxlength="15" name="dossier">
            </p>

            <p class="weight_out por wrap_call" style="">
                <img src="img/mobile0.png" id="mobile">
                证件号
                <input type="text" placeholder="必填" class="weight" maxlength="18" name="licenseno">
            </p>
            <p id="mobileTop"></p>
            <p class="weight_out por" style="">
                <img src="img/birth0.png">
                注册日
                <input type="text" placeholder="yyyy-MM-dd" class="weight" maxlength="10" name="register">
            </p>
            <p class="weight_out por" style="">
                <img src="img/email0.png">
                邮&nbsp;&nbsp;&nbsp;&nbsp;箱
                <input type="email" placeholder="选填" class="weight" maxlength="30" name="email">
            </p>
            <p class="weight_out por" style="">
                <img src="img/wechat0.png">
                电&nbsp;&nbsp;&nbsp;&nbsp;话
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="mobile">
            </p>
        </div>
        <div class="query">确定</div>
    </div>
    <div class="shaft_wrap">
        <div class="shaft_top">
				<span>
					<i></i>
				</span>
            说明
        </div>
        <div class="shaft_body">

        </div>
    </div>
    <div class="bottomLogo">
        <p></p>
        <p></p>
    </div>
    <div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
    <div class="toast toast_error" style="display:none">信息输入有误</div>
    <div class="loading" style="display:none">
        <img src="img/loading.gif"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/handle.js"></script>
<script type="text/javascript" src="js/ask.js"></script>
<script type="text/javascript">
    var fromPage = "${fromPage}";
    var memberNum = "";
    var memName = "";
    var memImgUrl = "";
    $(function () {
        var id = "${driverId}"
        if (id != "") {
            var data = {
                id: id
            }
            getDriverInfo(data, function () {
                memImgUrl = $("#filePicker").attr("src");
                memberNum = $("input[name='memberNum']").val();
                memName = $("input[name='name']").val();
            });
        }

        //轴组详情页面的展开和收起
        $(".type_detail").on('click', function (e) {
            e.preventDefault();
            $("input,select").blur();
            $(".shaft_wrap").animate({
                left: "0"
            }, 200);
        });
        $(".shaft_top span").on('click', function (e) {
            $(".shaft_wrap").animate({
                left: "100%"
            }, 200);

        });


        //选择种类时的交互效果
        $(".vehicle_class span").on('click', function (e) {
            $("input,select").blur();
            if ($(this).has('img').length <= 0) {
                $(this).append("<img class='selected_arr' src='img/selected.png'>")
            }
            $(this).addClass('class_selected').siblings('span').removeClass('class_selected').find('img').remove();
            //移除已选和已填的数据
            $(".vehicle_truck_type option:eq(0),.vehicle_car_type option:eq(0)").attr('selected', 'selected').siblings('option').removeAttr('selected', 'selected');
        });

        $("input[name='mobile']").on('input', function (e) {
            var input = $(this).val().replace(/\D/ig, '');
            $(this).val(input);
        });
        $("input[name='licenseno']").on('input', function (e) {
            var input = $(this).val().replace(/\W+/ig, "");
            $(this).val(input);
        });
        $("input[name='dossier']").on('input', function (e) {
            var input = $(this).val().replace(/\W+/ig, "");
            $(this).val(input);
        });

        $(".query").on('click', function (e) {
            var classModel = $(".vehicle_truck_type option:selected").attr('data-vehicleType');
            var name = $('[name="name"]').val();
            var register = $('[name="register"]').val();
            var dossier = $('[name="dossier"]').val();
            var licenseNo = $('[name="licenseno"]').val();
            var email = $('[name="email"]').val();
            var mobile = $('[name="mobile"]').val();
            if (name == "" || name == null || register == "" || register == null
                || dossier == "" || dossier == null || licenseNo == "" || licenseNo == null
                || classModel == "" || classModel == null) {
                errorToast("必填项不能为空", 3);
                return;
            }
            var mobReg = /^[0-9]{3,11}$/;//仅为数字
            if (!mobReg.test(mobile) && mobile != "") {
                errorToast("请输入正确格式的手机号", 3);
                return false;
            }
            var regReg = /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/;
            if (!regReg.test(register)) {
                errorToast("请输入正确格式的注册日期", 3);
                return false;
            }
            var lisReg = /^(\d{17})(\d|[xX])$/;
            if (!lisReg.test(licenseNo)) {
                errorToast("请输入正确格式的证件号码", 3);
                return false;
            }

            var data = {
                name: name,
                classModel: classModel,
                register: register,
                email: email,
                dossier: dossier,
                mobile: mobile,
                licenseNo: licenseNo
            };
            updateDriverSubmit(data);
        });
    })
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="js/weixin.js"></script>
<script type="text/javascript">
    var jsApiList = ['onMenuShareTimeline', 'onMenuShareAppMessage'];
    /* getSignature(jsApiList, function () {
         shareMemberInfo(memberNum, memName, "${fromUser}", memImgUrl);
    })*/
</script>
</body>
</html>